<template>
  <div class="dashboard-container">
    <!-- 实时数据看板 -->
    <div class="realtime-section">
      <h3 class="section-title">
        <i class="el-icon-data-line"></i>
        实时数据看板
        <el-button 
          type="text" 
          size="mini" 
          @click="refreshRealtimeData"
          :loading="realtimeLoading"
        >
          <i class="el-icon-refresh"></i> 刷新
        </el-button>
      </h3>
      
      <el-row :gutter="20" class="realtime-cards">
        <el-col :span="8">
          <div class="realtime-card users">
            <div class="card-icon">
              <i class="el-icon-user"></i>
            </div>
            <div class="card-content">
              <div class="card-value">{{ realtimeData.onlineUsers || 0 }}</div>
              <div class="card-label">在线用户</div>
              <div class="card-trend positive">
                <i class="el-icon-caret-top"></i>
                +{{ realtimeData.todayNewUsers || 0 }}
              </div>
            </div>
          </div>
        </el-col>
        
        <el-col :span="8">
          <div class="realtime-card orders">
            <div class="card-icon">
              <i class="el-icon-shopping-bag-2"></i>
            </div>
            <div class="card-content">
              <div class="card-value">{{ realtimeData.todayOrders || 0 }}</div>
              <div class="card-label">今日订单</div>
              <div class="card-trend positive">
                <i class="el-icon-caret-top"></i>
                +12%
              </div>
            </div>
          </div>
        </el-col>
        
        <el-col :span="8">
          <div class="realtime-card revenue">
            <div class="card-icon">
              <i class="el-icon-coin"></i>
            </div>
            <div class="card-content">
              <div class="card-value">¥{{ formatNumber(realtimeData.todayRevenue) || 0 }}</div>
              <div class="card-label">今日收入</div>
              <div class="card-trend positive">
                <i class="el-icon-caret-top"></i>
                +8%
              </div>
            </div>
          </div>
        </el-col>

      </el-row>
    </div>

    <!-- 总览统计 -->
    <div class="overview-section">
      <h3 class="section-title">
        <i class="el-icon-s-data"></i>
        总览统计
      </h3>
      
      <el-row :gutter="20" class="overview-cards">
        <el-col :span="6">
          <div class="overview-card total-users">
            <div class="card-header">
              <span class="card-title">总用户数</span>
              <i class="el-icon-user card-icon"></i>
            </div>
            <div class="card-body">
              <div class="main-value">{{ formatNumber(statistics.totalUsers) }}</div>
              <div class="sub-values">
                <div class="sub-value">
                  <span class="label">学生：</span>
                  <span class="value">{{ formatNumber(statistics.totalStudents) }}</span>
                </div>
                <div class="sub-value">
                  <span class="label">教师：</span>
                  <span class="value">{{ formatNumber(statistics.totalTeachers) }}</span>
                </div>
              </div>
              <div class="trend-info">
                <span class="trend-label">较上月：</span>
                <span class="trend-value positive">+{{ (statistics.trendData?.userGrowthRate * 100).toFixed(1) }}%</span>
              </div>
            </div>
          </div>
        </el-col>
        
        <el-col :span="6">
          <div class="overview-card total-revenue">
            <div class="card-header">
              <span class="card-title">总收入</span>
              <i class="el-icon-money card-icon"></i>
            </div>
            <div class="card-body">
              <div class="main-value">¥{{ formatNumber(statistics.totalRevenue) }}</div>
              <div class="sub-values">
                <div class="sub-value">
                  <span class="label">今日：</span>
                  <span class="value">¥{{ formatNumber(statistics.todayRevenue) }}</span>
                </div>
                <div class="sub-value">
                  <span class="label">本月：</span>
                  <span class="value">¥{{ formatNumber(statistics.monthRevenue) }}</span>
                </div>
              </div>
              <div class="trend-info">
                <span class="trend-label">较上月：</span>
                <span class="trend-value positive">+{{ (statistics.trendData?.revenueGrowthRate * 100).toFixed(1) }}%</span>
              </div>
            </div>
          </div>
        </el-col>
        
        <el-col :span="6">
          <div class="overview-card total-courses">
            <div class="card-header">
              <span class="card-title">课程数据</span>
              <i class="el-icon-collection card-icon"></i>
            </div>
            <div class="card-body">
              <div class="main-value">{{ formatNumber(statistics.totalCourses) }}</div>
              <div class="sub-values">
                <div class="sub-value">
                  <span class="label">上架：</span>
                  <span class="value">{{ formatNumber(statistics.onlineCourses) }}</span>
                </div>
                <div class="sub-value">
                  <span class="label">待审核：</span>
                  <span class="value">{{ formatNumber(statistics.pendingCourses) }}</span>
                </div>
              </div>
              <div class="trend-info">
                <span class="trend-label">平均评分：</span>
                <span class="trend-value">{{ statistics.avgRating }}分</span>
              </div>
            </div>
          </div>
        </el-col>
        
        <el-col :span="6">
          <div class="overview-card total-orders">
            <div class="card-header">
              <span class="card-title">订单数据</span>
              <i class="el-icon-box card-icon"></i>
            </div>
            <div class="card-body">
              <div class="main-value">{{ formatNumber(statistics.totalOrders) }}</div>
              <div class="sub-values">
                <div class="sub-value">
                  <span class="label">今日：</span>
                  <span class="value">{{ formatNumber(statistics.todayOrders) }}</span>
                </div>
                <div class="sub-value">
                  <span class="label">客单价：</span>
                  <span class="value">¥{{ formatNumber(statistics.avgOrderAmount) }}</span>
                </div>
              </div>
              <div class="trend-info">
                <span class="trend-label">较上月：</span>
                <span class="trend-value positive">+{{ (statistics.trendData?.orderGrowthRate * 100).toFixed(1) }}%</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 审核和投诉面板 -->
    <div class="panel-section">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="panel-card">
            <h3 class="panel-title">
              <i class="el-icon-user-solid"></i>
              教师审核面板
              <el-badge :value="teacherAuditData.pendingAuditCount" :max="99" class="badge" />
            </h3>
            
            <div class="panel-stats">
              <div class="stat-item">
                <span class="stat-value">{{ teacherAuditData.pendingAuditCount || 0 }}</span>
                <span class="stat-label">待审核</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ teacherAuditData.riskTeacherCount || 0 }}</span>
                <span class="stat-label">风险教师</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ teacherAuditData.newApplications || 0 }}</span>
                <span class="stat-label">今日新申请</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ teacherAuditData.avgProcessTime || 0 }}天</span>
                <span class="stat-label">平均处理时间</span>
              </div>
            </div>
            
            <div class="panel-list">
              <div class="list-header">
                <span>待审核教师</span>
                <el-button type="text" size="mini">查看全部</el-button>
              </div>
              <div class="list-content">
                <div 
                  v-for="teacher in teacherAuditData.pendingTeachers" 
                  :key="teacher.id"
                  class="list-item"
                >
                  <div class="item-info">
                    <div class="item-name">{{ teacher.name }}</div>
                    <div class="item-desc">{{ teacher.subject }} · {{ formatTime(teacher.applyTime) }}</div>
                  </div>
                  <div class="item-actions">
                    <el-tag :type="teacher.urgency === '高' ? 'danger' : 'warning'" size="mini">
                      {{ teacher.urgency }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        
        <el-col :span="12">
          <div class="panel-card">
            <h3 class="panel-title">
              <i class="el-icon-warning"></i>
              投诉处理面板
              <el-badge :value="complaintData.pendingComplaints" :max="99" class="badge" />
            </h3>
            
            <div class="panel-stats">
              <div class="stat-item">
                <span class="stat-value">{{ complaintData.pendingComplaints || 0 }}</span>
                <span class="stat-label">待处理</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ complaintData.totalComplaints || 0 }}</span>
                <span class="stat-label">总投诉</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ complaintData.todayComplaints || 0 }}</span>
                <span class="stat-label">今日新增</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ complaintData.avgResponseTime || 0 }}h</span>
                <span class="stat-label">平均响应时间</span>
              </div>
            </div>
            
            <div class="panel-list">
              <div class="list-header">
                <span>最近投诉</span>
                <el-button type="text" size="mini">查看全部</el-button>
              </div>
              <div class="list-content">
                <div 
                  v-for="complaint in complaintData.recentComplaints" 
                  :key="complaint.id"
                  class="list-item"
                >
                  <div class="item-info">
                    <div class="item-name">{{ complaint.studentName }} → {{ complaint.teacherName }}</div>
                    <div class="item-desc">{{ complaint.type }} · {{ formatTime(complaint.createTime) }}</div>
                  </div>
                  <div class="item-actions">
                    <el-tag 
                      :type="complaint.status === '待处理' ? 'warning' : 'success'" 
                      size="mini"
                    >
                      {{ complaint.status }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 图表分析区域 -->
    <div class="charts-section">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="chart-card">
            <h3 class="chart-title">
              <i class="el-icon-trend-charts"></i>
              用户增长趋势
            </h3>
            <div class="chart-content" id="userGrowthChart" style="height: 300px;">
              <div class="chart-placeholder">
                <i class="el-icon-data-line"></i>
                <span>用户增长趋势图表展示区域</span>
              </div>
            </div>
          </div>
        </el-col>
        
        <el-col :span="12">
          <div class="chart-card">
            <h3 class="chart-title">
              <i class="el-icon-money"></i>
              收入趋势分析
            </h3>
            <div class="chart-content" id="revenueChart" style="height: 300px;">
              <div class="chart-placeholder">
                <i class="el-icon-coin"></i>
                <span>收入趋势图表展示区域</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
          <div class="chart-card">
            <h3 class="chart-title">
              <i class="el-icon-location"></i>
              地区分布分析
            </h3>
            <div class="chart-content" id="regionChart" style="height: 300px;">
              <div class="chart-placeholder">
                <i class="el-icon-map-location"></i>
                <span>地区分布图表展示区域</span>
              </div>
            </div>
          </div>
        </el-col>
        
        <el-col :span="12">
          <div class="chart-card">
            <h3 class="chart-title">
              <i class="el-icon-pie-chart"></i>
              学生等级分布
            </h3>
            <div class="chart-content" id="levelChart" style="height: 300px;">
              <div class="chart-placeholder">
                <i class="el-icon-pie-chart"></i>
                <span>学生等级分布饼图</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 排行榜区域 -->
    <div class="ranking-section">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="ranking-card">
            <h3 class="ranking-title">
              <i class="el-icon-trophy"></i>
              课程销售排行榜
            </h3>
            <div class="ranking-list">
              <div 
                v-for="(course, index) in courseRanking" 
                :key="course.rank"
                class="ranking-item"
              >
                <div class="rank-number" :class="getRankClass(index)">{{ course.rank }}</div>
                <div class="rank-info">
                  <div class="rank-name">{{ course.courseName }}</div>
                  <div class="rank-desc">{{ course.category }} · {{ course.teacherName }}</div>
                </div>
                <div class="rank-data">
                  <div class="rank-sales">销量：{{ course.salesCount }}</div>
                  <div class="rank-revenue">¥{{ formatNumber(course.revenue) }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        
        <el-col :span="12">
          <div class="ranking-card">
            <h3 class="ranking-title">
              <i class="el-icon-star-on"></i>
              教师排行榜
            </h3>
            <div class="ranking-list">
              <div 
                v-for="(teacher, index) in teacherRanking" 
                :key="teacher.rank"
                class="ranking-item"
              >
                <div class="rank-number" :class="getRankClass(index)">{{ teacher.rank }}</div>
                <div class="rank-info">
                  <div class="rank-name">{{ teacher.teacherName }}</div>
                  <div class="rank-desc">{{ teacher.subject }} · {{ teacher.level }}</div>
                </div>
                <div class="rank-data">
                  <div class="rank-students">学生：{{ teacher.studentCount }}</div>
                  <div class="rank-revenue">¥{{ formatNumber(teacher.revenue) }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 城市渗透率分析 -->
    <div class="penetration-section">
      <h3 class="section-title">
        <i class="el-icon-map-location"></i>
        城市渗透率分析
      </h3>
      
      <div class="penetration-content">
        <el-table 
          :data="cityPenetration" 
          class="penetration-table"
          stripe
        >
          <el-table-column prop="city" label="城市" width="120"></el-table-column>
          <el-table-column prop="totalPopulation" label="总人口" width="120">
            <template slot-scope="scope">
              {{ formatNumber(scope.row.totalPopulation) }}
            </template>
          </el-table-column>
          <el-table-column prop="userCount" label="用户数" width="100"></el-table-column>
          <el-table-column prop="penetrationRate" label="渗透率" width="120">
            <template slot-scope="scope">
              {{ (scope.row.penetrationRate * 100).toFixed(4) }}%
            </template>
          </el-table-column>
          <el-table-column prop="marketPotential" label="市场潜力" width="100">
            <template slot-scope="scope">
              <el-tag 
                :type="getPotentialTagType(scope.row.marketPotential)" 
                size="mini"
              >
                {{ scope.row.marketPotential }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="渗透率可视化">
            <template slot-scope="scope">
              <div class="penetration-bar">
                <div 
                  class="penetration-fill" 
                  :style="{ width: (scope.row.penetrationRate * 10000).toFixed(2) + '%' }"
                ></div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getDashboardStatistics,
  getRealtimeData,
  getTeacherAuditPanelData,
  getComplaintPanelData,
  getCourseRanking,
  getTeacherRanking,
  getStudentLevelDistribution,
  getRegionDistribution,
  getCityPenetrationAnalysis,
  getUserGrowthTrend,
  getRevenueTrend
} from '@/api/dashboard'

export default {
  name: 'Dashboard',
  data() {
    return {
      loading: false,
      realtimeLoading: false,
      
      // 数据
      statistics: {},
      realtimeData: {},
      teacherAuditData: {},
      complaintData: {},
      courseRanking: [],
      teacherRanking: [],
      studentLevelDistribution: {},
      regionDistribution: [],
      cityPenetration: [],
      userGrowthTrend: [],
      revenueTrend: [],
      
      // 定时器
      realtimeTimer: null
    }
  },
  
  mounted() {
    this.loadAllData()
    this.startRealtimeUpdate()
  },
  
  beforeDestroy() {
    if (this.realtimeTimer) {
      clearInterval(this.realtimeTimer)
    }
  },
  
  methods: {
    async loadAllData() {
      this.loading = true
      try {
        await Promise.all([
          this.loadStatistics(),
          this.loadRealtimeData(),
          this.loadPanelData(),
          this.loadRankingData(),
          this.loadDistributionData(),
          this.loadTrendData()
        ])
        
        // 延迟加载图表，确保DOM已渲染
        this.$nextTick(() => {
          this.renderCharts()
        })
      } catch (error) {
        console.error('加载数据失败', error)
      } finally {
        this.loading = false
      }
    },
    
    async loadStatistics() {
      const response = await getDashboardStatistics()
      if (response.code === 200) {
        this.statistics = response.data
      }
    },
    
    async loadRealtimeData() {
      const response = await getRealtimeData()
      if (response.code === 200) {
        this.realtimeData = response.data
      }
    },
    
    async loadPanelData() {
      const [teacherResponse, complaintResponse] = await Promise.all([
        getTeacherAuditPanelData(),
        getComplaintPanelData()
      ])
      
      if (teacherResponse.code === 200) {
        this.teacherAuditData = teacherResponse.data
      }
      if (complaintResponse.code === 200) {
        this.complaintData = complaintResponse.data
      }
    },
    
    async loadRankingData() {
      const [courseResponse, teacherResponse] = await Promise.all([
        getCourseRanking(8),
        getTeacherRanking(8)
      ])
      
      if (courseResponse.code === 200) {
        this.courseRanking = courseResponse.data
      }
      if (teacherResponse.code === 200) {
        this.teacherRanking = teacherResponse.data
      }
    },
    
    async loadDistributionData() {
      const [levelResponse, regionResponse, penetrationResponse] = await Promise.all([
        getStudentLevelDistribution(),
        getRegionDistribution(),
        getCityPenetrationAnalysis()
      ])
      
      if (levelResponse.code === 200) {
        this.studentLevelDistribution = Array.isArray(levelResponse.data) ? levelResponse.data : []
      }
      if (regionResponse.code === 200) {
        this.regionDistribution = Array.isArray(regionResponse.data) ? regionResponse.data : []
      }
      if (penetrationResponse.code === 200) {
        this.cityPenetration = Array.isArray(penetrationResponse.data) ? penetrationResponse.data : []
      }
    },
    
    async loadTrendData() {
      const endDate = new Date().toISOString().split('T')[0]
      const startDate = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
      
      const [userResponse, revenueResponse] = await Promise.all([
        getUserGrowthTrend(startDate, endDate),
        getRevenueTrend(startDate, endDate)
      ])
      
      if (userResponse.code === 200) {
        this.userGrowthTrend = userResponse.data
      }
      if (revenueResponse.code === 200) {
        this.revenueTrend = revenueResponse.data
      }
    },
    
    renderCharts() {
      // 这里应该使用 ECharts 或其他图表库来渲染图表
      // 由于没有引入图表库，这里只是占位
      console.log('渲染图表...')
    },
    
    async refreshRealtimeData() {
      this.realtimeLoading = true
      try {
        await this.loadRealtimeData()
      } finally {
        this.realtimeLoading = false
      }
    },
    
    startRealtimeUpdate() {
      // 每30秒自动更新实时数据
      this.realtimeTimer = setInterval(() => {
        this.loadRealtimeData()
      }, 30000)
    },
    
    // 工具方法
    formatNumber(num) {
      if (!num) return '0'
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    
    formatTime(time) {
      if (!time) return '-'
      const date = new Date(time)
      const now = new Date()
      const diff = now - date
      
      if (diff < 60000) { // 1分钟内
        return '刚刚'
      } else if (diff < 3600000) { // 1小时内
        return Math.floor(diff / 60000) + '分钟前'
      } else if (diff < 86400000) { // 1天内
        return Math.floor(diff / 3600000) + '小时前'
      } else {
        return date.toLocaleDateString()
      }
    },
    
    getRankClass(index) {
      if (index === 0) return 'rank-first'
      if (index === 1) return 'rank-second'
      if (index === 2) return 'rank-third'
      return 'rank-normal'
    },
    
    getPotentialTagType(potential) {
      switch (potential) {
        case '高': return 'success'
        case '中': return 'warning'
        case '低': return 'info'
        default: return 'info'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background: #f5f7fa;
  
  .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    
    i {
      margin-right: 8px;
      color: #409eff;
    }
    
    .el-button {
      margin-left: auto;
    }
  }
}

.realtime-section {
  margin-bottom: 30px;
  
  .realtime-cards {
    .realtime-card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      display: flex;
      align-items: center;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      transition: transform 0.2s;
      
      &:hover {
        transform: translateY(-2px);
      }
      
      .card-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        
        i {
          font-size: 24px;
          color: white;
        }
      }
      
      .card-content {
        flex: 1;
        
        .card-value {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 4px;
        }
        
        .card-label {
          font-size: 14px;
          color: #606266;
          margin-bottom: 8px;
        }
        
        .card-trend {
          font-size: 12px;
          display: flex;
          align-items: center;
          
          i {
            margin-right: 4px;
          }
          
          &.positive {
            color: #67c23a;
          }
          
          &.negative {
            color: #f56c6c;
          }
          
          &.neutral {
            color: #909399;
          }
        }
      }
      
      &.users {
        .card-icon { background: #409eff; }
        .card-value { color: #409eff; }
      }
      
      &.orders {
        .card-icon { background: #67c23a; }
        .card-value { color: #67c23a; }
      }
      
      &.revenue {
        .card-icon { background: #e6a23c; }
        .card-value { color: #e6a23c; }
      }
      
      &.performance {
        .card-icon { background: #f56c6c; }
        .card-value { color: #f56c6c; }
      }
      
      &.load {
        .card-icon { background: #909399; }
        .card-value { color: #909399; }
      }
      
      &.update {
        .card-icon { background: #606266; }
        .card-value { color: #606266; }
      }
    }
  }
}

.overview-section {
  margin-bottom: 30px;
  
  .overview-cards {
    .overview-card {
      background: white;
      border-radius: 8px;
      padding: 24px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        
        .card-title {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
        }
        
        .card-icon {
          font-size: 20px;
          color: #409eff;
        }
      }
      
      .card-body {
        .main-value {
          font-size: 32px;
          font-weight: bold;
          margin-bottom: 12px;
        }
        
        .sub-values {
          margin-bottom: 12px;
          
          .sub-value {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
            font-size: 14px;
            
            .label {
              color: #606266;
            }
            
            .value {
              color: #303133;
              font-weight: 500;
            }
          }
        }
        
        .trend-info {
          font-size: 14px;
          
          .trend-label {
            color: #606266;
          }
          
          .trend-value {
            font-weight: 500;
            
            &.positive {
              color: #67c23a;
            }
            
            &.negative {
              color: #f56c6c;
            }
          }
        }
      }
      
      &.total-users .main-value { color: #409eff; }
      &.total-revenue .main-value { color: #67c23a; }
      &.total-courses .main-value { color: #e6a23c; }
      &.total-orders .main-value { color: #f56c6c; }
    }
  }
}

.panel-section {
  margin-bottom: 30px;
  
  .panel-card {
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 100%;
    
    .panel-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      
      i {
        margin-right: 8px;
        color: #409eff;
      }
      
      .badge {
        margin-left: 8px;
      }
    }
    
    .panel-stats {
      display: flex;
      margin-bottom: 20px;
      
      .stat-item {
        flex: 1;
        text-align: center;
        
        .stat-value {
          display: block;
          font-size: 24px;
          font-weight: bold;
          color: #409eff;
          margin-bottom: 4px;
        }
        
        .stat-label {
          font-size: 12px;
          color: #606266;
        }
      }
    }
    
    .panel-list {
      .list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        font-size: 14px;
        font-weight: 500;
        color: #303133;
      }
      
      .list-content {
        .list-item {
          display: flex;
          align-items: center;
          padding: 12px 0;
          border-bottom: 1px solid #f0f0f0;
          
          &:last-child {
            border-bottom: none;
          }
          
          .item-info {
            flex: 1;
            
            .item-name {
              font-size: 14px;
              color: #303133;
              margin-bottom: 4px;
            }
            
            .item-desc {
              font-size: 12px;
              color: #909399;
            }
          }
          
          .item-actions {
            .el-tag {
              margin-left: 8px;
            }
          }
        }
      }
    }
  }
}

.charts-section {
  margin-bottom: 30px;
  
  .chart-card {
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    .chart-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      
      i {
        margin-right: 8px;
        color: #409eff;
      }
    }
    
    .chart-content {
      background: #f9f9f9;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .chart-placeholder {
        display: flex;
        align-items: center;
        color: #909399;
        font-size: 14px;
        
        i {
          font-size: 32px;
          margin-right: 12px;
        }
      }
    }
  }
}

.ranking-section {
  margin-bottom: 30px;
  
  .ranking-card {
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    .ranking-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      
      i {
        margin-right: 8px;
        color: #409eff;
      }
    }
    
    .ranking-list {
      .ranking-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .rank-number {
          width: 32px;
          height: 32px;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          margin-right: 12px;
          
          &.rank-first {
            background: #ffd700;
            color: white;
          }
          
          &.rank-second {
            background: #c0c0c0;
            color: white;
          }
          
          &.rank-third {
            background: #cd7f32;
            color: white;
          }
          
          &.rank-normal {
            background: #f0f0f0;
            color: #606266;
          }
        }
        
        .rank-info {
          flex: 1;
          
          .rank-name {
            font-size: 14px;
            color: #303133;
            margin-bottom: 4px;
          }
          
          .rank-desc {
            font-size: 12px;
            color: #909399;
          }
        }
        
        .rank-data {
          text-align: right;
          
          .rank-sales, .rank-students {
            font-size: 12px;
            color: #606266;
            margin-bottom: 4px;
          }
          
          .rank-revenue {
            font-size: 14px;
            color: #67c23a;
            font-weight: 500;
          }
        }
      }
    }
  }
}

.penetration-section {
  .penetration-content {
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    .penetration-table {
      width: 100%;
    }
    
    .penetration-bar {
      width: 100%;
      height: 12px;
      background: #f0f0f0;
      border-radius: 6px;
      overflow: hidden;
      
      .penetration-fill {
        height: 100%;
        background: linear-gradient(90deg, #67c23a, #409eff);
        transition: width 0.3s ease;
      }
    }
  }
}
</style>